/**
 * @class RefApp.views.cartForm
 * @extends Ext.form.FormPanel
 * The panel containing a form to submit our order.
 */
RefApp.views.CartForm = Ext.extend(Ext.form.FormPanel, {	
	id : 'cartForm',
	initComponent : function()
	{
		
		var backbutton, clearbutton, submitbutton;	// buttons variables
		var names, adress, contact;					// form fields variables
		
		// buttons description
		backbutton = {
          	  xtype : "button",
        	  ui : "back",
        	  text : "Anuluj",
        	  handler : this.onCancel,
        	  scope : this
          };
		
		clearbutton = { 
				xtype : "button",
				ui : "decline",
				text : "Wyczyść",
				handler : this.resetForm,
				scope : this
         };
		
		submitbutton = {
          	  xtype : "button",
        	  ui : "confirm",
        	  text : "Zamów",
        	  handler : this.onSubmit,
        	  scope : this
          };

		// fields description
		// note that after each field in form there is an ErrorField, 
		// which lets us to show error messages when user have written sth wrong and click the submitbutton
		
		// names fields
		names = {
     		xtype: 'fieldset',
     		id: 'cartFormName',
     		title: 'Imię i nazwisko',
     		defaults: {
                xtype: 'textfield',
                labelAlign: 'left',
                labelWidth: '30%',
                required: true,
            },
            items: [
                {
                    name : 'name',
                    label: 'Imię',
                }, {
                    xtype: 'ErrorField',
                    fieldname: 'name',
                    label: 'Imię',
                }, {
                    name : 'surname',
                    label: 'Nazwisko',
                }, {
                    xtype: 'ErrorField',
                    fieldname: 'surname',
                    label: 'Nazwisko',
                }
           ]
     	};
     	
     	// adress fields
     	adress = {
     		xtype: 'fieldset',
     		id: 'cartFormAdress',
     		title: 'Adres zamieszkania',
     		defaults: {
     			xtype: 'textfield',
                labelAlign: 'left',
                labelWidth: '30%',
                required: true,
            },
            items: [
                {
                    name: 'city',
                    label: 'Miasto',
                }, {
                    xtype: 'ErrorField',
                    fieldname: 'city',
                    label: 'Miasto',
                }, {
                    name: 'street',
                    label: 'Ulica',
                }, {
                    xtype: 'ErrorField',
                    fieldname: 'street',
                    label: 'Ulica',
                }, {
                    name: 'house',
                    label: 'Nr domu',
                }, {
                    xtype: 'ErrorField',
                    fieldname: 'house',
                    label: 'Nr domu',
                }, {
                    name: 'apartment',
                    label: 'Nr mieszkania',
                    required: false,
                }, {
                    xtype: 'ErrorField',
                    fieldname: 'apartment',
                    label: 'Nr mieszkania',
                }
            ]
     	};
     	
     	// email, phone
     	contact = {
     		xtype: 'fieldset',
     		id: 'cartFormMedia',
     		title: 'Kontakt',
     		defaults: {
                labelAlign: 'left',
                labelWidth: '30%',
                required: true
            },
            items: [
                {
                    name: 'email',
                    label: 'E-mail',
                    xtype: 'emailfield',
                }, {
                    xtype: 'ErrorField',
                    fieldname: 'email',
                    label: 'E-mail',
                },
                {
                    name: 'phone',
                    label: 'Telefon',
                    xtype: 'numberfield'
                }, {
                    xtype: 'ErrorField',
                    fieldname: 'phone',
                    label: 'Telefon',
                }
            ]
     	};
		
		// applying buttons and form to the panel
		Ext.apply(this, {
			scroll: 'vertical',
			dockedItems: [{
				xtype: "toolbar",
				title: "Formularz",
				items : [backbutton, clearbutton, {xtype : "spacer"}, submitbutton],
      
			}],
			items: [names, adress, contact]
		});
		
		RefApp.views.CartForm.superclass.initComponent.call(this);
	},
	
	// handlers
	
	/*
	* Summary:		Function reset all form fields and hide all error fields.
	* Parameters:	none
	*/	
	
	resetForm : function()
	{
		Ext.dispatch({
			controller: 'Cart',
			action: 'formReset',
			form: this
		});
	},
	
	/*
	* Summary:		Function called when the backbutton is tapped. 
	* 				Function call showCartList function in Cart controller.
	* Parameters:	none
	*/
	
	onCancel : function()
	{
		Ext.dispatch({
				controller: 'Cart',
				action: 'showCartList'
			});
	},
	
	/*
	* Summary:		Function called when the submitbutton is tapped. 
	* 				Function call formShow function in Cart controller.
	* Parameters:	none
	*/
	
	onSubmit : function()
	{
		Ext.dispatch({
			controller : 'Cart',
			action: 'formSubmit',
			data: this.getValues(),		// all values from the form
			record: this.getRecord(),	// record model
			form: this					// CartForm panel
		});
		
	},
	
	/*
	* Summary:		Function show errors connected with each field in the form. 
	* Parameters:	errors description
	*/
	
	showErrors : function(errors)
	{
		// for each field in form
		this.fields.each(function(field) {
            var fieldErrors = errors.getByField(field.name);				// get field by name

            // if field is invalid
            if (fieldErrors.length > 0) {									
                var errorField = this.down('#'+field.name+'ErrorField');	// get errorField code container
                field.addCls('invalid-field');								// add CSS class
                errorField.update(fieldErrors);								// update error information
                errorField.show();											// show error
            } 
            // if field is valid
            else {
            	this.resetField(field);										// reset error Field
            }
        }, this);
		
	},
	
	/*
	* Summary:		Function reset error field - it hide it and remove CSS class. 
	* Parameters:	field to reset
	*/
	
	resetField : function(field)
	{
		var errorField = this.down('#'+field.name+'ErrorField');
        errorField.hide();
        field.removeCls('invalid-field');
	},
	
	/*
	* Summary:		Function called when the submitbutton is tapped and all fields of the form are valid. 
	* 				Show alert with "Thank You" message.
	* Parameters:	none
	*/
	
	afterOrder : function()
	{
		Ext.Msg.alert('Danke!', 'Dziękujemy za złożenie zamówienia. Kurier będzie w ciągu 30 minut');
		
	}
});

Ext.reg('cartForm', RefApp.views.CartForm);



/**
 * @class RefApp.views.ErrorField
 * @extends Ext.Component
 * The component containing template to display errors connected with form fields. 
 * By default, each error field is hidden
 */
RefApp.views.ErrorField = Ext.extend(Ext.Component, {

    initComponent: function() {
        config = {
            xtype: 'component',
            id: this.fieldname + 'ErrorField',				// unique ID for each error field
            cls: 'errorfield',								// CSS class
            tpl: [											// template describing how to display error
                '<tpl if="values.length &gt; 0">',
                '    <ul>',
                '        <tpl for=".">',
                '            <li>'+this.label+'{message}</li>',
                '        </tpl>',
                '    </ul>',
                '</tpl>'
            ],
            hidden: true									// by default hide error field
        };

        Ext.apply(this, config);
        RefApp.views.ErrorField.superclass.initComponent.call(this);
    },

});
Ext.reg('ErrorField', RefApp.views.ErrorField);